<template>
  <view class="goodsCar">
    <!-- <u-navbar
      :is-back="true"
      :custom-back="BackM"
      title="买卖宝明细"
      back-text=""
    >
      <view
        class="slot-right"
        style="width: 100%; display: flex; justify-content: flex-end"
      >
      </view>
    </u-navbar> -->

    <view class="car-content">
      <u-swipe-action
        :show="item.show"
        :vibrate-short="true"
        :index="index"
        v-for="(item, index) in list"
        :key="item.id"
        @click="click"
        @open="open"
        :options="options"
        style="padding-top: 0.5rem"
      >
        <view class="item u-border-bottom">
          <img style="margin-right: 0.3rem;" src="../../style/image/cargo/round.png" alt="" />
          <image mode="aspectFill" :src="item.images" />
          <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
          <view class="title-wrap">
            <div
              style="
                font-size: 0.75rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #000000;
              "
            >
              充电宝底座设备充电宝底座设备
            </div>
            <div class="content-bottom">
              <div
                style="
                  font-size: 1rem;
                  font-family: Myriad Pro;
                  font-weight: 300;
                  color: #ff0000;
                "
              >
                ¥ 300
              </div>
              <div>
                <u-number-box
                  v-model="value"
                  @change="valChange"
                ></u-number-box>
              </div>
            </div>
          </view>
        </view>
      </u-swipe-action>
    </view>

    <!-- <div class="footerB" >

        </div> -->
    <div class="footP">
      <div
        @click="addPosM"
        style="
          height: 3rem;
          line-height: 3rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
        "
      >
        <!-- <img style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
        <div style="margin-left: 0.2rem; display: flex; align-items: center">
          <img
            style="width: 1rem; height: 1rem"
            src="../../style/image/cargo/selectRound.png"
            alt=""
          />
          <div
            style="
              font-size: 0.7rem;
              font-family: PingFang SC;
              font-weight: 300;
              color: #666666;
              margin-left: 0.5rem;
            "
          >
            全选
          </div>
        </div>

        <div class="foot-right" style="margin-right: 0rem">
          <div
            style="
              font-size: 0.73rem;
              font-family: PingFang SC;
              font-weight: 300;
            "
          >
            合计:<span style="color: red">¥3.00</span>
          </div>
          <div class="settle">结算</div>
        </div>
      </div>
    </div>


    
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  list = [
    {
      id: 1,
      title: "长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来",
      images: "https://cdn.uviewui.com/uview/common/logo.png",
      show: false,
    },
    {
      id: 2,
      title: "新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来",
      images: "https://cdn.uviewui.com/uview/common/logo.png",
      show: false,
    },
    {
      id: 3,
      title: "登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇",
      images: "https://cdn.uviewui.com/uview/common/logo.png",
      show: false,
    },
  ];
  disabled = false;
  btnWidth = 180;
  show = false;
  options = [
    {
      text: "收藏",
      style: {
        backgroundColor: "#007aff",
      },
    },
    {
      text: "删除",
      style: {
        backgroundColor: "#dd524d",
      },
    },
  ];

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑

    uni.navigateTo({
      url: "./selectBusin",
    });
  }
}
</script>


<style  scoped>
>>> .title-wrap {
  width: 100%;
}

.item {
  display: flex;
  padding: 20rpx;
  align-items: center;
}

image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}

.title {
  text-align: left;
  font-size: 28rpx;
  margin-top: 20rpx;
}

.content-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goodsCar {
  background-color: #f4f5f7;
  height: 88vh;
}

.footP {
  position: absolute;
  bottom: 0;
  background-color: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content-bottom {
  margin: 1rem;
}

.car-content {
  padding: 0rem 0.5rem 0.5rem 0.5rem;
}

.foot-right {
  display: flex;
}

.settle {
  background-color: #02af74;
  height: 100%;
  width: 5rem;
  text-align: center;
  font-size: 0.8rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: white;
  margin-left: 1rem;
}
</style>